<!--
 * @Date: 2023-09-14 14:41:11
 * @LastEditTime: 2023-10-12 15:32:06
 * 介绍:违法任务删除
-->
<script lang="ts" setup>
import { getCountdown } from "@@/utils/tools/date";
import { _require } from "@@/utils/tools";
import dayjs from "dayjs";
import { useCurrentDate } from "@@/hooks/toolsHooks";
import { apiBanTaskDelList, ApiBanTaskDelList } from "@@/api/wk/list";
import { divide, multiply, add } from "mathjs";
import { fixedDecimals, omitText } from "@@/utils/tools/format";
import router from "@@/router";
import omit from "lodash/omit";

const { currentDate } = useCurrentDate();

function countdown(time: string, end_time_hour: StrNumber) {
  const res = getCountdown(
    currentDate.value,
    dayjs(time).add(Number(end_time_hour), "h")
  );
  if (res.diffTime <= 0) return false;
  return `${res.H}:${res.m}:${res.s}`;
}

function getRatio(ok: number, no: number) {
  const res = multiply(divide(ok, add(ok, no)), 100);
  return Number.isNaN(res) ? 0 : res;
}

function toDetails(item: ApiBanTaskDelList.DataItem) {
  router.push({
    name: "wk-taskDetails",
    query: {
      json: JSON.stringify(item.task),
      banTaskDel: JSON.stringify(omit(item, ["task"])),
    },
  });
}
</script>
<template>
  <CrequestList :api="apiBanTaskDelList">
    <template #item="{ item }">
      <Ccard @click="toDetails(item)" class="list-item auto-MT-sm">
        <BwkLevel :level="item.user.level" />
        <div class="MT-0">
          <h3>{{ omitText(item.user.address) }}</h3>
        </div>
        <div class="C-T3 MT-xs">
          {{ dayjs(item.created_at).format("YYYY-MM-DD HH:mm:ss") }}
        </div>
        <div class="flex-A-C B-M1-O2 C-M1 PD-xs PL-sm PR-sm MT-sm R-xs">
          <Cicon name="icon-shijian" />
          <div class="ML-xs">{{ $t("daoJiShi") }}</div>
          <div class="ML-auto">
            {{
              countdown(item.created_at, item.end_time_hour) || $t("yi-jie-shu")
            }}
          </div>
        </div>
        <Ccard class="flex-A-C PT-xs PB-xs MT-md gap-xs">
          <div class="flex-1 T-omit">{{ item.explain }}</div>
          <Rbutton class="ML-auto" bg="var(--C-LG1)" borderStyle="none" round>
            <div class="flex-A-C">
              <Rimage
                size="48rem"
                :src="_require('src/assets/images/icon/jingbi.png')"
              />
              <div>${{ fixedDecimals(item.task.commission, 2) }}</div>
            </div>
          </Rbutton>
        </Ccard>
        <div>{{ $t("tong-guo-shuai") }}</div>
        <div class="PD-md MT-0">
          <Rslider
            :model-vlaue="getRatio(item.agree_num, item.disagree_num)"
            readonly
            :min="0"
            :max="100"
            :step="0.01"
            active-color="var(--C-success)"
            inactive-color="var(--C-fail)"
          >
            <template #button="{ value }">
              <CstateTag class="T-nowrap C-white">
                {{ fixedDecimals(value, 0) }}%
              </CstateTag>
            </template>
          </Rslider>
        </div>
        <!-- <div class="T-A-R T-S-sm">
              <span>{{ $t("tou-piao-ren-shu") }}</span>
              {{ add(Number(item.agree_num), Number(item.disagree_num)) }}
            </div> -->
      </Ccard>
    </template>
  </CrequestList>
</template>
<style lang="scss" scoped>
.list-item {
  $size: 120rem;
  position: relative;
  $offsetTop: calc($size / 2 + var(--gap-sm));
  margin-top: $offsetTop;
  padding-top: $offsetTop;
  .BwkLevel {
    position: absolute;
    top: 0;
    transform: translateY(-50%) translateX(calc(0rem - var(--gap-sm)));
  }
}
</style>
